آموزش بوت استرپ 4 برای مبتدیان - ساخت 5 وب سایت از ابتدا [ویدئو]

سرفصل ها و درس ها

مقدمه ای بر بوت استرپ Introduction to Bootstrap

• به Bootstrap 4 خوش آمدید Welcome to Bootstrap 4

• معرفی بوت استرپ به بوت استرپ 4 چیست What is Bootstrap introduction to Bootstrap 4

• ویژگی های جدید Bootstrap 4 New Bootstrap 4 Features

• ویرایشگر دوره و مروری بر منابع Course editor and resources overview

شروع کار با بوت استرپ Getting Started with Bootstrap

• بوت استرپ را روی کامپیوتر خود راه اندازی کنید Setup Bootstrap on your computer

• افزودن کلاس های بوت استرپ را امتحان کنید Try out Bootstrap adding classes

• ظروف بوت استرپ برای نگهداری عناصر Bootstrap Containers to Hold Elements

• اندازه رسانه ها در بوت استرپ Media sizes in Bootstrap

شبکه بوت استرپ Bootstraps grid

• ستون های Bootstrap Grid Bootstrap Grid columns

• اندازه خودکار ستون بوت استرپ Bootstrap Column Auto Sizing

• ترتیب و فاصله ستون های شبکه Grid Column Order and spacing

• ردیف های تو در تو در داخل ردیف ها nested rows within rows

طراحی سریع بوت استرپ Bootstrap Rapid Design

• تایپوگرافی متن برجسته standout text typography

• موارد گروه را فهرست کنید List group items

• تصاویر پاسخگو بوت استرپ Bootstrap responsive images

• بوت استرپ JumboTron Bootstrap JumboTron

• نشان ها در بوت استرپ Badges in Bootstrap

دکمه های بوت استرپ Bootstrap Buttons

• دکمه ها در بوت استرپ Buttons in Bootstrap

• گروه های دکمه بوت استرپ Bootstrap Button Groups

• دکمه های رادیویی دکمه ها و چک باکس ها Button Radio Buttons and check boxes

کامپوننت ها و ابزارهای مشترک بوت استرپ Bootstrap Common Components and utilities

• نوار پیشرفت بوت استرپ Bootstrap Progress bar

• فونت و رنگ پس زمینه Font and Background color

• کلاس های ابزار بوت استرپ Bootstrap Utility Classes

ساختار بوت استرپ Bootstrap structure

• جداول بوت استرپ Bootstrap tables

• کارت های بوت استرپ Bootstrap Cards

• ساختار کارت و گروه بندی Card Structure and grouping

• Bootstrap Forms Grid Bootstrap Forms Grid

• افزودنی های گروه ورودی Input Group Addons

• انتخاب فرم و ورودی فایل Form Select and File Input

• منوی کشویی Bootstrap Drop down menu Bootstrap

کامپوننت ناوبری بوت استرپ Navigation Bootstrap component

• کامپوننت Nav Bootstrap Bootstrap Nav Component

• Bootstrap NavBar Responsive Bootstrap NavBar Responsive

• گزینه های نوار ناوبری بوت استرپ Navbar options Bootstrap

اجزای تعاملی بوت استرپ Bootstrap interactive components

• هشدارهای بوت استرپ Bootstrap Alerts

• Popover و Tooltip Popover and Tooltip

• جمع کردن و نمایش عناصر Collapse and show elements

• Bootstrap Modals Bootstrap Modals

• چرخ فلک تصویر بوت استرپ Bootstrap Image Carousel

نتیجه Conclusion

• نتیجه گیری بوت استرپ Bootstrap conclusion

• بخش بررسی وب سایت 1 Section Overview Website 1

توسعه سریع وب سایتی سریع ایجاد کنید Rapid Web development create a quick website

• بخش پیش نمایش وب سایت 2 Section Preview Website 2

• یک قالب پیش فرض بوت استرپ بسازید Build a Default Bootstrap template

• نوار ناوبری پاسخگو بسازید Build responsive navbar

• NavBar Bootstrap 4 پاسخگو Responsive NavBar Bootstrap 4

• بخش قد کامل Full Height Section

• بخش ساخت Build section

• بخش دکمه های بوت استرپ Bootstrap Buttons Section

• Bootstrap 4 Cards in Action Bootstrap 4 Cards in Action

• فرم های بوت استرپ 4 Bootstrap 4 Forms

• اضافه کردن بخش جدید با تصویر پس زمینه Add new section with background image

• پاورقی بوت استرپ 4 Footer Styling Bootstrap 4

• بوت استرپ ScrollSpy Bootstrap ScrollSpy

• روش متحرک سازی جایزه جی کوئری Bonus jQuery Animate Method

• نمای کلی ساخت وب سایت Website Build Overview

وب سایت بوت استرپ 4 هدر تصویر چند صفحه Multiple Page Image header Bootstrap 4 website

• بخش پیش نمایش وب سایت 3 Section Preview Website 3

• معرفی پروژه Project Introduction

• ایجاد قالب بوت استرپ Create Bootstrap template

• طراحی ساختار وب سایت Design Website Structure

• راه اندازی ساختار نوار نوار Setup NavBar Structure

• یک بوت استرپ ناوبری پاسخگو 4 ایجاد کنید Create a Responsive Navbar Bootstrap 4

• ساخت بخش پس زمینه تصویر Build image Background Section

• ساختار پاورقی Bootstrap 4 Bootstrap 4 Footer Structure

• افزودن نمادهای عالی فونت Adding Font Awesome Icons

• صفحه اصلی طراحی Design Home Page

• ساخت صفحه اصلی Build Home Page

• برنامه ریزی طراحی درباره صفحه Design Planning About Page

• Bootstrap List and Grid about Page Bootstrap List and Grid about Page

• صفحه خدمات طرح و طراحی Plan and Design Services Page

• صفحه خدمات با استفاده از کارت Services Page using Cards

• راه اندازی طراحی صفحه تماس Setup Contact Page Design

• ساخت فرم تماس بوت استرپ 4 Build Contact Form Bootstrap 4

• بررسی وب سایت Multiple Page Bootstrap 4 Multiple Page Bootstrap 4 Website review

وب سایت چند صفحه ای را از سایت نمونه کارها بسازید Build Multiple Page Website from scratch portfolio site

• بخش پیش نمایش وب سایت 4 Section Preview Website 4

• معرفی پروژه Project Introduction

• راه اندازی سریع بوت استرپ 4 Quick Bootstrap 4 Setup

• ساخت ساختار صفحه بوت استرپ Build Bootstrap Page Structure

• نوار NavBar پاسخگو بوت استرپ بسازید Build Bootstrap Responsive NavBar

• ساخت ساختار پاورقی Build Footer Structure

• ساخت پاورقی با فونت عالی Build Footer at Font Awesome

• طرح بندی صفحه وب را کامل کنید Complete WebPage Layout

• طرح بندی صفحه شاخص طراحی Design Index Page Layout

• راه اندازی Bootstrap 4 Grid Setup Bootstrap 4 Grid

• صفحه اصلی چرخ فلک Home Page Carousel

• بخش Call to Action را اضافه کنید Add Call to Action Section

• بوت استرپ 4 کارت Bootstrap 4 Cards

• برنامه ریزی در مورد طراحی صفحه Plan about Page Design

• جمع کردن عناصر ساخت درباره صفحه Collapse Elements Build about Page

• صفحه نمونه کار برنامه ریزی و طراحی Plan and Design Portfolio Page

• صفحه نمونه کارها Bootstrap Cards Bootstrap Cards Portfolio Page

• صفحه تماس با پلان Plan Contact Page

• ساخت فرم تماس Build Contact Form

• مرور و بررسی صفحه وب Webpage overview and Review

وب سایت تک صفحه ای Bootstrap Parallax Style Bootstrap Parallax Style Single Page Website

• بخش پیش نمایش وب سایت 5 Section Preview Website 5

• ایجاد قالب اولیه بوت استرپ 4 Basic Bootstrap 4 Template Creation

• Bootstrap NavBar ایجاد کنید Create Bootstrap NavBar

• بخش سرصفحه Header Section

• یک بخش دیگر بسازید Build another Section

• اضافه کردن بخش درباره من Add About Me Section

• کارت های بوت استرپ و گرید Bootstrap Cards and Grid

• یک فرم تماس ایجاد کنید Create a contact form

• یک پاورقی اضافه کنید Add a Footer

• انیمیشن جایزه با جی کوئری Bonus animate with jQuery

• بررسی اجمالی پروژه Project Overview